<template>
  <view>
    performance start
    <xone
      v-if="type===1"
      ref="xone" 
      :xid="xid"
    />
    performance end
  </view>
</template>
<script>
  import mxone from '../lowcode/page/xone'
  
  export default {
    components: {
    },
    mixins: [mxone],
    data() {
      return {
        lll: Array.from({length: 100},(v,i)=>i),
        type: 0,
      }
    },
    onLoad(query) {
      this.type = Number(query.type)

      this.xdata = {
        ...this.xdata,
        _xcrudList: Array.from({length: 20},(v,i)=>i)
      }

      this.xmeta = {
        ...this.xmeta,
        // xcomponents: this.lll.map(v=>({
        //   xcode: 'View', 
        //   xcomponents: [{xcode: 'Tag', xtitle: v}],
        // }))
        // xcomponents: [
        //   {
        //     xcode: 'View', 
        //     xcomponents: this.lll.map(v=>({xcode: 'Tag', xtitle: v}))
        //   },
        // ],
        xcomponents1: [
          // {
          //   xcode: 'View',
          //   xtitle: ()=>{
          //     console.log('xxxxx')
          //     return 'xx'
          //   },
          //   xstyle: 'border: 1px solid red',
          // },
          {
            xcode: 'Icon',
            xstyle: {color: 'red'},
            name: 'pushpin',
            label: 'icon',
          }
        ],
        xcomponents: [
          // {
          //   xcode: 'View', 
          //   xcomponents: Array.from({length: 10},(v,i)=>i).map(v=>({
          //     xcode: 'View', 
          //     xcomponents: Array.from({length: 10},(v,i)=>i).map(v=>({
          //       xcode: 'Tag', xtitle: v
          //     }))
          //   }))
          // },
          {
            xcode: 'Tag',
            xtitle: '搜索'
          },
          {
            xcode: 'Tag',
            xtitle: '搜索1'
          },
          {
            xcode: 'DataList',
            xtype: 'cardFields',
            xfields: [
              {
                xcode: 'Tag',
                xtitle: 'field1'
              },
              {
                xcode: 'Tag',
                xtitle: 'field2'
              },
              {
                xcode: 'Tag',
                xtitle: 'field3'
              },
              {
                xcode: 'Tag',
                xtitle: 'field4'
              },
              {
                xcode: 'Tag',
                xtitle: 'field5'
              },
              {
                xcode: 'Tag',
                xtitle: 'field6'
              },
              {
                xcode: 'Icon',
                xstyle: {color: 'red'},
                name: 'pushpin',
                label: 'icon',
              },
              {
                xcode: 'Button',
                xstyle: {color: 'red'},
                xtitle: 'pushpin',
                size: 'medium',
                type: 'primary',
              }
            ],
            // xcomponent: {
            //   xcode: 'Tag',
            //   xtitle: 'vvv'
            // }
          },
          // {
          //   xcode: 'View',
          //   xcomponents: Array.from({length: 20},(v,i)=>i).map((v,i)=>({
          //     xcode: 'View', 
          //     xstyle: 'border: 1px solid black',
          //     xcomponents: Array.from({length: 10},(vv,ii)=>ii).map((vv,ii)=>({
          //       xcode: 'Tag', xtitle: ()=>`行${i}-字段${ii}-组件1`
          //       // xcode: 'View',
          //       // xcomponents: [
          //       //   {xcode: 'Tag', xtitle: ()=>`行${i}-字段${ii}-组件1`},
          //       //   {xcode: 'Tag', xtitle: ()=>`行${i}-字段${ii}-组件2`},
          //       // ]
          //     }))
          //   }))
          // }
        ]
      }
    },
    methods:{
      getX(i) {
        return i+1
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
